<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../react18/react.development.js"></script>
    <script src="../../react18/react-dom.development.js"></script>
    <script src="../../react18/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /* 
        组件内的props：
          props主要用来做父子组件之间的通信 传递数据
          在父组件中给子组件标签中通过 属性的方式 想子组件内部传值
          子组件在组件内部通过 组件实例上的props属性来访问父组件传递的值
          props是制度属性，不允许在子组件修改props 可以传递数组 处理数组（不允许） 因为react是单项数据流
      */
      class Child extends React.Component {
        render() {
          const { car, changeCar } = this.props;
          return (
            <div>
              <h3>超哥开的车是{car}</h3>
              <button onClick={changeCar}>给老子换辆车</button>
            </div>
          );
        }
      }
      class App extends React.Component {
        state = {
          car: "八手奥拓",
        };
        render() {
          const { car } = this.state;
          return (
            <div>
              <h2>我是父亲，我开的是{car}</h2>
              <hr />
              <Child car={car} changeCar={this.changeCar} />
            </div>
          );
        }
        changeCar = () => {
          this.setState({
            car: "0000",
          });
        };
      }

      /* 
       props 做子传父
        因为props是单向数据流，自住兼不能直接修改父组件数据
        并且state数据也是组件是有的，只能自己修改
        子传父方法：
          父组件给子组件封装一个方法 可以修改到父组件的数据，通过props方式传递给子组件，子组件在需要的时候直接调用 可以来修改父组件的数据
      */

      /* 
        单向数据流：
          单向数据流：数据在组件之间的传递
          单向数据流：数据在某个组件被改动以后，只会影响一个方向上的其他组件（react的方向是从上到下）
          单向数据流的定义：规范数据的流向，数据是由外层组件想内层组件进行传递的更新
      */

      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
